<div
  class="flex space-x-2 justify-items-center justify-center"
>
  @for (i of indices(); track i) {
    <button
      type="button"
      aria-label="Rating Star"
      (click)="!isDisabled() && rate(i + 1)"
      class="rounded-sm"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="size-8 transition-transform"
        [ngClass]="{
          'text-amber-400': isCheckedAt(i),
          'text-amber-200': isDimmedAt(i),
          'text-slate-400': isUncheckedAt(i),
          'animate-wiggle':
            !isDisabled() &&
            rating() === i + 1 &&
            isAnimating(),
          'cursor-not-allowed': isDisabled(),
        }"
        (animationend)="isAnimating.set(false)"
      >
        <path
          (mouseover)="
            !isDisabled() && tentativeRating.set(i + 1)
          "
          (mouseleave)="
            !isDisabled() && tentativeRating.set(0)
          "
          [ngClass]="{
            'transition-colors cursor-pointer':
              !isDisabled(),
          }"
          fill-rule="evenodd"
          d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
          clip-rule="evenodd"
        />
      </svg>
      <s class="hidden">
        Rating {{ i + 1 }} of {{ indices().length }}
      </s>
    </button>
  }
</div>

@if (showRating() && rating()) {
  <div class="divider">RATING</div>
  <p class="self-center">
    <span class="leading-10"> Your rated </span>
    <span
      class="transition-all"
      [ngClass]="{
        'text-xs': rating() === 1,
        'text-sm': rating() === 2,
        text: rating() === 3,
        'text-lg': rating() === 4,
        'text-xl': rating() === 5,
        'text-2xl': rating() > 5,
      }"
      >{{ rating() }}</span
    >
  </p>
}
